<template>
	<div>
		<!-- 查询表单 -->
		<div class="check-form-box">
			<el-form :model="checkForm" label-width="100px" class="checkForm">
				<el-form-item label="姓名">
					<el-input v-model="checkForm.realName" />
				</el-form-item>
				<el-form-item label="手机号码">
					<el-input v-model="checkForm.telNumber" />
				</el-form-item>

				<el-form-item label="状态">
					<el-select v-model="checkForm.status" class="m-2" placeholder="Select" size="large">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary">查询</el-button>
					<el-button type="primary" @click="clickEdit">添加</el-button>
				</el-form-item>
			</el-form>
		</div>

	   <!-- 列表 -->
	   <div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column width="80" prop="id" label="用户ID" />
			<el-table-column prop="name" label="昵称" />
			<el-table-column prop="realName" label="姓名" />
 
			<el-table-column prop="telId" label="手机号ID" />
			<el-table-column prop="address" label="上级ID" />
			<el-table-column prop="address" label="是否激活">
				<template v-slot:default="scope">
					<el-switch v-model="scope.row.isAvtive" />
				</template>
			</el-table-column>

			<el-table-column prop="address" label="备注" />
			<el-table-column prop="address" label="注册时间" />
			<el-table-column fixed="right" label="操作" width="120">
				<template v-slot:default="scope">
					<div class="div-cell">
						<el-button link type="primary" size="small" @click="clickEdit(scope.row)">编辑</el-button>
						<el-button link type="primary" size="small" @click="clickEdit(scope.row)">禁用</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
	   </div>
		<div>
			<el-form :model="addForm" label-width="120px" v-if="ifEdit" class="add-form">
				<el-form-item label="姓名">
					<el-input v-model="addForm.name" />
				</el-form-item>
				 
				<el-form-item label="手机号码">
					<el-input v-model="addForm.telNum" />
				</el-form-item>
				<el-form-item label="部门">
					<el-select v-model="addForm.department" class="m-2" placeholder="Select" size="large">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="初始密码">
					<el-input v-model="addForm.initialPwd" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">保存</el-button>
					<el-button @click="ifEdit = false">取消</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted } from "vue"
const tableData = [
	{
		id: '167854',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
		avater: "src/assets/img/icon-lock.png",
		isAvtive: true,
	},
	{
		id: '167854',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
		isAvtive: false,

	},
	{
		id: '167854',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
		isAvtive: false,

	},
	{
		id: '167854',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles',
		isAvtive: false,

	},
]
const options = [
	{
		label:'关闭',
		value:'0'
	},
	{
		label:'开启',
		value:'1'
	}
]
const addForm =reactive({
	name:"",
	telNum:"",
	department:"",
	initialPwd:""
})
const checkForm = reactive({
	realName: "",
	telNumber: "",
	status:""
})
const form = reactive({
	name: ""
})
const ifEdit = ref(false)
const activeIndex = ref('1')
const handleSelect = () => {
	console.log('activeIndex', activeIndex);

}
const clickEdit = (e: any) => {

	console.log('编辑', e.isAvtive);
	ifEdit.value = true

}
const onSubmit = () => {

}

onMounted(()=>{
	console.log('onMounted');
	
})

</script>

<style scoped>
.el-sub-menu {
	width: 40px;
}

.div-cell {

	display: flex;
}

.add-form {
	width: 50%;
	border: 1px solid red;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
	z-index: 9999;
}
</style>
